<script>
	import * as THREE from 'three';
	import * as SC from 'svelte-cubed';

	let width = 1;
	let height = 1;
	let depth = 1;

	let spin = 0;

	SC.onFrame(() => {
		spin += 0.01;
	});
</script>

<SC.Canvas
	antialias
	background={new THREE.Color('rgba(243, 244, 246,1)')}
	fog={new THREE.FogExp2('rgba(243, 244, 246,1)', 0.1)}
	shadows
>
	<SC.Group position={[0, -height / 2, 0]}>
		<SC.Mesh
			geometry={new THREE.PlaneGeometry(20, 20)}
			material={new THREE.MeshStandardMaterial({
				map: new THREE.TextureLoader().load('../img/bird.jpg')
			})}
			rotation={[-Math.PI / 2, 0, 0]}
			receiveShadow
		/>

		<SC.Primitive
			object={new THREE.GridHelper(50, 50, 'papayawhip', 'papayawhip')}
			position={[0, 0.001, 0]}
		/>
	</SC.Group>

	<SC.Mesh
		geometry={new THREE.BoxGeometry()}
		material={new THREE.MeshStandardMaterial({
			// color: 0xff3e00,
			color: '#f40',
			roughness: 0.5,
			metalness: 0.5,
			opacity: 0.5,
			transparent: true
		})}
		scale={[width, height, depth]}
		rotation={[0, spin, 0]}
		castShadow
	/>

	<SC.Mesh
		geometry={new THREE.BoxGeometry()}
		material={new THREE.MeshStandardMaterial({
			color: 'bg-purple-600',
			// color: '#ff5',
			roughness: 0.5,
			metalness: 0.5,
			opacity: 0.5
			// transparent: true
		})}
		position={[-1, 1, 1]}
		scale={[width * 0.5, height * 0.5, depth * 0.5]}
		rotation={[spin, 0, 0]}
		castShadow
	/>

	<SC.PerspectiveCamera position={[3, 2, 3]} />
	<SC.OrbitControls enableZoom={false} maxPolarAngle={Math.PI * 0.51} />
	<SC.AmbientLight intensity={0.6} />
	<SC.DirectionalLight intensity={0.6} position={[-2, 3, -1]} shadow={{ mapSize: [2048, 2048] }} />
</SC.Canvas>
<div class="absolute z-30 right-2 bottom-4">
	<label><input type="range" bind:value={width} min={0.1} max={3} step={0.1} /> width</label>
	<label><input type="range" bind:value={height} min={0.1} max={3} step={0.1} /> height</label>
	<label><input type="range" bind:value={depth} min={0.1} max={3} step={0.1} /> depth</label>
</div>
